<template>
    <div class="code-check" id="codeCheck">
        <div class="code-input-wrap">
            <input id="inviteCode" code="code" class="code-input" v-model="code" placeholder="请输入验证码" type="number"
                @blur="codeInputBlur" @focus="focusFn">
            <label v-if="codeMsg.codeWarnShow && content.isShowRedWarn" class="code-error"
                for="inviteCode">{{codeMsg.codeWarnText}}</label>
            <img v-if="codeMsg.isNeedClearIcon" class="booking_close_button"
                src="../../../assets/images/common/booking_close_button.png" @click="code=null" />
        </div>
        <div class="count-down-wrap">
            <span type="button" class="count-down" @click="getCodeFn()" :class="{'disabled':!codeMsg.isCangetCode}"
                v-html="codeMsg.codeDown"></span>
        </div>
    </div>
</template>
<!--使用方法<div slot="cantClick" @click="sureGetLocationFn" class="com_black"></div>-->
<script>
import xurl from "../../../x/xurl";
export default {
    code: "codeCheck",
    props: {
        getCodeUrl: {
            type: String
        },
        checkCodeUrl: {
            type: String
        },
        codeMsgProps: {
            type: Object
        }
    },
    data () {
        return {
            codeTimer: null,
            code: null,
            codeMsg: {
                codeWarnShow: false,//是否需要错误的提示
                codeWarnText: '用户名不能为空',//toast提示字样
                codeDown: '获取验证码',//验证码右侧的提示字样
                isCangetCode: false,//是否可以点击获取验证码
                time: 60,//道计时的时间
                isNeedClearIcon: true,//是否需要清除验证码input的内容
                isNeedCodeDown: true,//是否需要获取验证码的那几个字
                codeLength: 6,//验证码验证长度
                isEmptyNotWarn: true,
            }
        }
    },
    mounted () {
        this.codeMsg = Object.assign({}, this.codeMsg, this.codeMsgProps)
    },
    methods: {
        codeInputBlur () {
            this.iosBlur()
            let regCode = new RegExp('^\\d{' + this.codeMsg.codeLength + '}$')
            let that = this;
            if (!this.code && !this.codeMsg.isEmptyNotWarn) {
                this.codeWarnText = '请输入验证码';
                this.$root.$emit('toast', { msg: this.codeWarnText });
                this.codeWarnShow = true;
            } else if (this.code && !regCode.test(this.code) && this.code.toString().length > 0) {
                this.codeWarnText = '验证码为' + this.codeMsg.codeLength + '位数字';
                this.$root.$emit('toast', { msg: this.codeWarnText });
                this.codeWarnShow = true;
            }
        },
        getCodeFn () {
            this.$emit('getCode')
        },
        focusFn () {
            this.$emit('codeFocusFn');
        },
        getCode () {
            let that = this;
            // let url = this.NW_API_vue + "/api/store/apply/code/send/phone/" + phone;
            this.isCangetCode = true;
            xurl.postLoading(this.getCodeUrl).then(data => {
                if (data.success) {
                    this.isCangetCode = true;
                    if (that.codeTimer) {
                        clearInterval(that.codeTimer);
                    }
                    that.codeTimer = setInterval(function () {
                        that.codeMsg.time--;
                        that.codeDown = `重新获取(${that.codeMsg.time})s`;
                        if (that.codeMsg.time <= 0) {
                            that.codeMsg.time = 60;
                            that.codeDown = `获取验证码`;
                            that.isCangetCode = false;
                            clearInterval(that.codeTimer);
                        }
                    }, 1000)
                } else {
                    this.isCangetCode = false;
                }
            })
        },
    },
    watch: {
        code: function (val) {
            let obj = {};
            obj = { code: val };
            if (val && val.length >= this.codeMsg.codeLength) {
                this.code = val.slice(0, this.codeMsg.codeLength);
            }
            let regCode = new RegExp('^\\d{' + this.codeMsg.codeLength + '}$')
            if (regCode.test(this.code)) {
                obj.codeTrue = true;
                this.$emit("changeCheck", obj);
                this.codeWarnShow = false;
            } else {
                obj.codeTrue = false;
                this.$emit("changeCheck", obj);
            }
        },
        codeMsgProps (val) {
            this.codeMsg = Object.assign({}, this.codeMsg, val);
        }
    }
}
</script>

<style scoped>
.code-check {
    position: relative;
    width: 100%;
    display: -webkit-flex;
    display: flex;
}
.code-input {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    border-radius: 5px;
    border: 1px solid #d7d7d7;
    padding-left: 0.2rem;
    margin-top: 0.12rem;
}
.code-error {
    position: absolute;
    bottom: -0.2rem;
    color: red;
    font-size: 0.11rem;
    left: 0.2rem;
    z-index: 10;
}
.count-down-wrap {
    margin-top: 0.12rem;
    padding-left: 0.1rem;
}
.count-down {
    background: #fff;
    display: block;
    width: 0.9rem;
    height: 0.4rem;
    line-height: 0.4rem;
    color: #3b67a4;
    cursor: pointer;
    text-align: center;
    border: none;
    outline: none;
    font-size: 0.11rem;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    white-space: nowrap;
}
.code-input-wrap {
    -webkit-flex: 1;
    flex: 1;
    position: relative;
}
.disabled.count-down {
    color: gray;
}
.booking_close_button {
    width: 0.34rem;
    height: 0.34rem;
    right: 0;
    padding: 0.1rem;
    position: absolute;
    top: 0.15rem;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.code-input::-webkit-input-placeholder {
    color: #cccccc;
}
.code-input::placeholder {
    color: #cccccc;
}
</style>